<template>
    <div class="inputDom">
        <div class="left">
            <div class="top">
                <div style="color: #6698ff;">{{ $t("text.Employee.l15") }}</div>
                <DialogLayout29 :dataList1="departmentList" :dataList2="rightTree" @returnData="returnData">
                    <span class="df" @click="isShowAddHouse">
                        <img class="addImg" src="../../assets/images/add.svg">
                        <div style="font-size: 14px;white-space: nowrap;color: #6698ff;">{{ $t("text.Employee.l21") }}</div>
                    </span>
                </DialogLayout29>
            </div>
            <div class="leftTree">
                <DialogLayout29 :dataList1="departmentList" :dataList2="rightTree" @returnData="returnData" isDetele isDb :selectItem="selectItem">
                    <el-tree :data="leftTree" @node-click="getItem"/>
                </DialogLayout29>
                <!-- <el-tree :data="leftTree" :props="defaultProps" @node-click="handleNodeClick" /> -->
            </div>
        </div>
        <div class="right">
            <div class="top" style="justify-content: center;">
                <div>{{ $t("text.Employee.l22") }}</div>
            </div>
            <div class="tree">
                <ChartTree :id="'echar_tree1'" :dataList="rightTree" v-if="isUpload" isDetele  :dataList1="departmentList" :dataList2="rightTree" ></ChartTree>
            </div>

            <div class="footer1">
                <div class="hit">{{ $t("text.Employee.l23") }}</div>
            </div>

            <div class="footer2">
                <img class="hitImg" src="../../assets/images/hit.svg">
                <div class="hit">{{ $t("text.Employee.l24") }}</div>
            </div>

        </div>
    </div>
</template>
    
<script>
import DialogLayout29 from '@/components/dialogLayout/DialogLayout29.vue'
import { orgOrgTree,findListByTypeCode } from '../../http/api'
import ChartTree from '@/components/chart/ChartTree.vue'


export default {
    name: 'DepartmentView',
    components: {
    DialogLayout29,
    ChartTree
},
    props: {
    },
    data() {
        return {
            leftTree: [],
            rightTree: [],
            isUpload:false,
            departmentList:[],
            selectItem:''
        }
    },
    mounted() {
        findListByTypeCode('orgLevel').then(res=>{
            if(res!=undefined)
                this.departmentList=res
            console.log(this.departmentList,'departmentList')
        }).catch()
        this.getData()
    },
    methods: {

        getItem(item){
            this.selectItem=item
        },

        getData() {
            this.isUpload=false
            orgOrgTree().then(res => {
                if (res !== undefined) {
                    console.log(res)
                    if (!(res[0].children==undefined)){
                      this.leftTree = this.convertDictNameToLabel1(JSON.parse(JSON.stringify(res[0].children)))
                    }
                    this.rightTree = this.convertDictNameToLabel2(JSON.parse(JSON.stringify(res)))[0]
                    this.isUpload=!this.isUpload
                    console.log(this.rightTree)
                }
            }).catch()
        },

        returnData(){
            this.getData()
        },

        //键值替换，换成指定数据格式
        convertDictNameToLabel1(data) {
            if (Array.isArray(data)) {
                return data.map(item => {
                    if (typeof item === 'object') {
                        item.label = item.dictName
                        delete item.dictName
                        item.value = item.dictValue
                        delete item.dictValue
                        if (item.children) {
                            item.children = this.convertDictNameToLabel1(item.children)
                        }
                    }
                    return item
                })
            }
        },

        convertDictNameToLabel2(data) {
            if (Array.isArray(data)) {
                return data.map(item => {
                    if (typeof item === 'object') {
                        item.name = item.dictName;
                        delete item.dictName;

                        if (item.children) {
                            item.children = this.convertDictNameToLabel2(item.children);
                        }
                    }
                    return item;
                })
            }
        },

    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
.inputDom {
    height: 100%;
    width: 100%;
    display: flex;
}

.left {
    min-width: 310px;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.leftTree {
    border: 1px solid #eee;
    margin: 20px;
    height: 100%;
    border-radius: 3px;
    margin-bottom: 50px;
}

.top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    margin: 0 20px;
    padding: 10px 0px;
}

.df {
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.addImg {
    width: 18px;
    height: 18px;
    padding-right: 3px;
}

.tree {
    border: 1px solid #eee;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 50px;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
}

.right {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.footer1 {
    position: absolute;
    bottom: 20px;
    font-size: 13px;
    left: 20px;
    display: flex;
    align-items: center;
    color: #6c6b6b;
}

.footer2 {
    position: absolute;
    bottom: 20px;
    font-size: 13px;
    right: 30px;
    display: flex;
    align-items: center;
    color: #6c6b6b;
}

.hitImg {
    width: 15px;
    height: 15px;
    padding-right: 2px;
}

.hit {
    color: #999;
    font-size: 13px;
}
</style>